<template>
  <view class="accout-home">
    <view class="segmented-control">
      <view class="control__item" @click="showHotTopic(0)" :style="{zIndex: isShowPopup ? 10 : 1004}">
        <view class="inner-b u-center" :class="currentSwiper == 0 ? 'active' : ''">
          {{['周', '月', '年度'][currentRankType]}}排行榜
          <view class="around u-center">
            <img :src="isHotTopicOpen ? 'https://img.qumoyugo.com/img/LWIMDV7E186F468MRBAU1697175576715.png' : 'https://img.qumoyugo.com/img/N8DQAZ31TP20BQ9D1EQE61697100161240.png'" style="width:24rpx;height:24rpx;margin-left:8rpx">
          </view>
        </view>
      </view>
      <view class="control__item" @click="showHotTopic(1)">
        <view class="inner-c u-center" :class="currentSwiper == 1 ? 'active' : ''">
          我的
        </view>
      </view>
    </view>
    <!-- <nav-bar :option="navBarOption"></nav-bar> -->
    <swiper class="swiper" :current="currentSwiper" @change="(e) => currentSwiper = e.detail.current">
      <swiper-item>
        <view class="pai-h-b">
          <view class="top-bg">
            <view class="items">
              <view :class="rankList.myRank.rowNum > 99  ? 'small num' : rankList.myRank.rowNum ? 'big num' : 'small num'">
                {{ rankList.myRank.rowNum > 99 ? '未上榜' : rankList.myRank.rowNum || '无排名'}}
              </view>
              <img class="avatar" :src="rankList.myRank.faceUrl">
              <view class="nickname" style="font-size: 28rpx;">
                <view class="u-line-1" style="width:280rpx">{{rankList.myRank.nickname}}</view>
              </view>
              <view class="integral u-center">
                <img src="https://img.qumoyugo.com/img/OAR79OV6YSXRPQT1S70Q1697097566697.png" style="width:26rpx;height:26rpx;margin-right:6rpx">
                +{{rankList.myRank.totalAmount}}
              </view>
            </view>
          </view>
        </view>
        <scroll-view scroll-y style="height: calc(100vh - 668rpx);" :class="rankList.biscuitList.length > 5 ? 'scroll-box wz' : 'scroll-box'" v-if="rankList.biscuitList.length">
          <view :class="rankList.biscuitList.length > 5 ? 'pai-h-b' : 'pai-h-b bg-w'">
            <view class="db-bg">
              <view class="items" v-for="(item, index) in rankList.biscuitList" :key="item.customerId">
                <view class="num">
                  <view v-if="index > 2">{{ item.rowNum }}</view>
                  <view v-else>
                    <img :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_xbg_top${index}.png`" style="width:50rpx;height:50rpx">
                  </view>
                </view>
                <img class="avatar" :src="item.faceUrl" :style="{borderColor: ['#FFB4B4', '#ACD7E0', '#FFD596'][index]}">
                <view class="nickname">
                  <view class="u-line-1" style="width:280rpx">{{item.nickname}}</view>
                </view>
                <view class="integral">+{{item.totalAmount}}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <view class="money-b">
          <img src="https://img.qumoyugo.com/webimgbg/ets-icon-cookies-xbg-n.png" class="img">
          <view style="flex:1">
            <view class="xbg">
              <!-- #ifdef MP-WEIXIN -->
              <text class="my">{{formatWX(accountData.currentTotal)}}</text>
              <!-- #endif -->
              <!-- #ifdef H5 -->
              <text class="my">{{format(accountData.currentTotal)}}</text>
              <!-- #endif -->
              <view>
                <img @click="openCookieTip" style="height:32rpx;width:32rpx" src="https://img.qumoyugo.com/webimgbg/attention_icon.png">
              </view>
            </view>
            <!-- #ifdef MP-WEIXIN -->
            <view style="display: flex;" v-if="accountData.frozen">（含待结算：{{ formatWX(accountData.frozen)}}）</view>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view style="display: flex;" v-if="accountData.frozen">（含待结算：{{ format(accountData.frozen)}}）</view>
            <!-- #endif -->
          </view>
          <!-- #ifdef H5 -->
          <!-- <view class="tix-btn u-center" @click="gotoPage('/account/withdraw')">提现</view> -->
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <view class="tix-btn u-center" @click="clickSettle(3)" v-if="mpConfig.mpAudit == 1">提现</view>
          <!-- #endif -->
        </view>
        <view class="cell-title">
          <view>获取和支出记录</view>
          <view class="u-center" @click="openTerm">
            <img src="https://img.qumoyugo.com/webimgbg/pets-icon-screen-ld-n.png" class="img">
            筛选
          </view>
        </view>
        <scroll-view scroll-y style="height: calc(100vh - 744rpx)" class="scroll-box wz">
          <view class="list-account">
            <view class="select">
              <view class="box u-center" @click="openSelect">
                {{currentTime.month}}月 <uni-icons type="bottom" size="14" color="#000000"></uni-icons>
              </view>
            </view>
            <view style="color:#999999;font-size:26rpx">
              <!-- #ifdef H5 -->
              <text>收入：{{format(accountFilter.income)}}</text>
              <text style="margin-left: 64rpx">支出：{{format(accountFilter.expend)}}</text>
              <!-- #endif -->
              <!-- #ifdef MP-WEIXIN -->
              <text>收入：{{formatWX(accountFilter.income)}}</text>
              <text style="margin-left: 64rpx">支出：{{formatWX(accountFilter.expend)}}</text>
              <!-- #endif -->
            </view>
            <view class="account-s-lst">
              <view class="item" v-for="item in listData" :key="item.id">
                <account-list :item="item"></account-list>
              </view>
              <view class="no-data" v-if="noData">
                <img src="https://img.qumoyugo.com/webimgbg/pet-records-no-data-act.png" class="img">
                <view>暂无交易记录哟～</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <uni-popup ref="popupSelect" type="bottom" background-color="#fff">
      <view class="popup-title">
        <view style="width: 120rpx; text-align: center;" @click="closePopupSelect">取消</view>
        <view style="color:#EE751E; width: 120rpx; text-align: center;" @click="sureTimeSearch">确定</view>
      </view>
      <view style="height: 400rpx">
        <picker-view :value="selectValue" immediate-change :indicator-style="indicatorStyle" class="picker-view" @change="timeChange">
          <picker-view-column>
            <view class="item" v-for="(item,index) in yearsList" :key="index">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in monthsList" :key="index">{{item}}月</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <self-popup ref="popupTips" :option="popupTipsOption"></self-popup>
    <uni-popup ref="popupTerm" type="right" @close="closeTerm">
      <view class="term-rg">
        <view class="title">
          筛选 <uni-icons type="closeempty" size="18" color="#999999" @click="closeTerm"></uni-icons>
        </view>
        <view class="content">
          <view class="tps">按项目</view>
          <view>
            <view class="item" :class="_businessType === 2 ? 'current' : ''" @click="changeBusinessType(2)" v-if="mpConfig.mpAudit == 1">
              <img src="https://img.qumoyugo.com/webimgbg/pets-xbg-sx-card.png" class="img">
              提现
            </view>
            <view class="item" :class="_businessType === 3 ? 'current' : ''" @click="changeBusinessType(3)">
              <img src="https://img.qumoyugo.com/webimgbg/pets-xbg-sx-hd.png" class="img">
              活动奖励
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="btn u-center" @click="_businessType = null">重置</view>
          <view class="btn u-center" style="background-color: #F1F1F1;" @click="selectList">筛选</view>
        </view>
      </view>
    </uni-popup>
    <!-- 小饼干提示 -->
    <uni-popup ref="cookieTip" type="center">
      <view style="width: 590rpx;background: #FFFFFF;border-radius: 42rpx;padding: 50.69rpx 58.33rpx">
        <view style="width: 100%;font-size: 38rpx;font-weight: 500;color: #333333;text-align: center">小饼干</view>
        <view style="width: 100%;font-size: 28rpx;color: #333333;line-height: 39rpx;margin-top: 57.64rpx">小饼干可以用来赠送其他人以增加亲密度，从而相互间进行更多的互动。 在品客聚精彩应用内有以下途径可以获得小饼干：</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">1.完成注册</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">2.完善资料</view>
        <view style="width: 100%;font-size: 28rpx;color: #333333;line-height: 39rpx;">在参与平台推出的活动任务期间，可以在下列条件达成时获得小饼干。</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">3.每日登录</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">4.作品完播</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">5.作品被评论</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">6.作品被收藏</view>
        <view style="width: 100%;font-size: 28rpx;color: #EE751E;line-height: 39rpx;">7.另外邀请好友同样有机会获得小饼干哦。</view>
        <view style="width:100%;display: flex;justify-content: center;align-items: center;margin-top: 45.14rpx">
          <view style="width: 278rpx;height: 83rpx;line-height:80rpx;background: #E9EDFF;border: 1rpx solid #333333;border-radius: 42rpx;text-align: center" @click="closeCookieTip">我知道了</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="chartList" type="top" background-color="#fff" @maskClick="hideMaskClick">
      <view class="chart-list">
        <view v-for="(n, index) in 3" :key="index" :class="currentRankType === index ? 'active itm' : 'itm'" @click="searchSortData(index)">
          {{['周', '月', '年度'][index]}}排行榜
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { onShow, onPullDownRefresh, onHide } from '@dcloudio/uni-app'
// import NavBar from '@/components/navBar/custom'
import AccountList from '@/components/list/accountRecord'
import SelfPopup from '@/components/SelfToast/popup'
import { STATUS_BAR_HEIGHT } from '@/assets/js/config'
// #ifdef H5
// eslint-disable-next-line import/no-duplicates
import { format, cookie } from '@/utils/utils'
// #endif
// #ifdef MP-WEIXIN
// eslint-disable-next-line import/no-duplicates
import { format as formatWX } from '@/utils/utils'
// #endif
const { $https, $statusBarHeight } = getCurrentInstance().appContext.config.globalProperties
const popupSelect = ref(null)
const isShowPopup = ref(false)
const popupTips = ref('')
const popupTerm = ref('')
const statusBarHeight = ref(0)
const indicatorStyle = ref('height: 80rpx')
const yearsList = ref([2022, 2023, 2024])
const selectValue = ref([2, new Date().getMonth()])
const monthsList = ref(12)
const currentTime = ref({
  month: new Date().getMonth() + 1,
  year: 2024
}) // 选中的年月
const _currentTime = ref({
  month: new Date().getMonth() + 1,
  year: 2024
}) // 缓存选中的年月
const businessType = ref(null) // 业务类型
const _businessType = ref(null)
const popupTipsOption = ref({
  title: '',
  content: ''
})
const currentSwiper = ref(0) // 当前的swriper
const isHotTopicOpen = ref(false) // 是否打开弹框
const chartList = ref(null) // popup排行榜弹框
const currentRankType = ref(0) // 0周1月2年
const rankList = ref({
  myRank: {},
  biscuitList: []
}) // 排行榜数据
// #ifdef MP-WEIXIN
const mpConfig = ref({
  download_guide_doc: '',
  mpAudit: 0
})
// #endif
// 无记录
const noData = ref(false)
const accountData = ref({
  drawable: 0,
  currentTotal: 0,
  frozen: 0
}) // 可用小饼干
const accountFilter = ref({
  expend: 0,
  income: 0
})
const listData = ref([])
onShow(() => {
  initData()
  // #ifdef H5
  document.getElementById('barHeight').style.height = 0
  document.getElementsByTagName('body')[0].style.paddingTop = 0
  // #endif
})
// #ifdef H5
onHide(() => {
  document.getElementById('barHeight').style.height = statusBarHeight.value + 'px'
  document.getElementsByTagName('body')[0].style.paddingTop = statusBarHeight.value + 'px'
})
// #endif
onMounted(() => {
  initList()
  getRankData()
  // #ifdef H5
  statusBarHeight.value = cookie.get(STATUS_BAR_HEIGHT)
  // #endif
  // #ifdef MP-WEIXIN
  statusBarHeight.value = $statusBarHeight
  // $https({
  //   url: '/common/config?key=mpAudit,download_guide_doc',
  //   type: ''
  // }).then(res => {
  //   if (res.code === 0) {
  //     mpConfig.value = {
  //       download_guide_doc: '',
  //       mpAudit: 0
  //     }
  //   }
  // })
  // #endif
})
onPullDownRefresh(() => {
  initData()
  initList()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 800)
})
// 小饼干排行榜数据
const getRankData = () => {
  const _type = ['week', 'month', 'year']
  $https({
    url: '/biscuit/rank/list',
    type: '',
    data: {
      type: _type[currentRankType.value]
    }
  }).then(res => {
    if (res.code === 0) {
      rankList.value = {
        myRank: res.data.myRank,
        biscuitList: res.data.biscuitItemList || []
      }
    }
  })
}
// tab切换
const showHotTopic = (type) => {
  if (type === 0 && currentSwiper.value !== 1) {
    isHotTopicOpen.value = !isHotTopicOpen.value
    isHotTopicOpen.value ? chartList.value.open() : chartList.value.close()
  } else {
    if (type === 1 && isHotTopicOpen.value) {
      isHotTopicOpen.value = false
    }
    chartList.value.close()
  }
  currentSwiper.value = type
}
// 关闭弹框
const hideMaskClick = () => {
  isHotTopicOpen.value = false
  chartList.value.close()
}
// 搜索排行榜数据
const searchSortData = (type) => {
  currentRankType.value = type
  hideMaskClick()
  getRankData()
}
const initData = () => {
  $https({
    url: '/biscuit/summary',
    type: '',
    method: 'get'
  }).then(res => {
    if (res.code === 0) {
      accountData.value = res.data
    }
  })
}
const initList = () => {
  $https({
    url: '/biscuit/trans',
    type: '',
    method: 'get',
    data: {
      type: businessType.value || '',
      date: `${currentTime.value.year}-${currentTime.value.month < 10 ? '0' + currentTime.value.month : currentTime.value.month}-01`
    }
  }).then(res => {
    if (res.code === 0) {
      listData.value = res.data.list
      accountFilter.value = {
        expend: res.data.expend,
        income: res.data.income
      }
      if (!res.data.list.length) {
        noData.value = true
      } else {
        noData.value = false
      }
    }
  })
}
const openSelect = () => {
  isShowPopup.value = true
  popupSelect.value.open()
}
const timeChange = (e) => {
  const [year, month] = e.detail.value
  _currentTime.value = {
    month: month + 1,
    year: yearsList.value[year]
  }
}
const clickSettle = (type) => {
  if (type === 1) {
    popupTipsOption.value = { title: '小饼干', content: '小饼干是品客聚精彩平台发布的虚拟货币，可以用来打赏其他用户、兑换礼品和直接提现(100小饼干=￥1)。部分小饼干将在参与的活动结束后才可使用或转移' }
  } else if (type === 2) {
    popupTipsOption.value = { title: '待结算', content: '奖励正部分小饼干将在参与的活动结束后才可使用或转移' }
  } else if (type === 3) {
    // #ifdef MP-WEIXIN
    popupTipsOption.value = { title: '小饼干提现', content: mpConfig.value.download_guide_doc }
    // #endif
  }
  popupTips.value.show()
}
const openTerm = () => {
  isShowPopup.value = true
  popupTerm.value.open()
}
const closeTerm = () => {
  isShowPopup.value = false
  popupTerm.value.close()
}
const closePopupSelect = () => {
  isShowPopup.value = false
  popupSelect.value.close()
}
// const gotoPage = (url) => {
//   uni.navigateTo({
//     url
//   })
// }
const changeBusinessType = (type) => {
  _businessType.value = type
}
const selectList = () => {
  businessType.value = _businessType.value
  initList()
  closeTerm()
}
const sureTimeSearch = () => {
  currentTime.value = {
    month: _currentTime.value.month,
    year: _currentTime.value.year
  }
  selectValue.value = [yearsList.value.indexOf(_currentTime.value.year), _currentTime.value.month - 1]
  initList()
  closePopupSelect()
}
const cookieTip = ref('')
const openCookieTip = () => {
  isShowPopup.value = true
  cookieTip.value.open()
}
const closeCookieTip = () => {
  isShowPopup.value = false
  cookieTip.value.close()
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.accout-home{
  min-height: 100vh;
  background: url(https://img.qumoyugo.com/webimgbg/picopino_account_home_bg_n.png) no-repeat top center;
  background-size: contain;
  padding: 340rpx 0 30rpx 0;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #FDF7EB 0%, rgba(253, 247, 235, 0.99) 0.01%, rgba(253, 247, 235, 0.00) 100%);
    top: 0;
    left: 0;
    z-index: -1;
  }
  .swiper{
    height: calc(100vh - 488rpx);
  }
  .scroll-box{
    border-radius: 20rpx;
    margin:0 30rpx;
    width:calc(100vw - 60rpx);
    &.wz{
      background:#fff;
      border:1px solid #eee;
    }
  }
  .pai-h-b{
    &.bg-w{
      background:#fff;
      border:1px solid #eee;
      border-radius: 20rpx;
    }
    .db-bg,.top-bg{
      padding: 0 42rpx 0 24rpx;
    }
    .top-bg{
      background: #DFE4FD;
      border: 2rpx solid #BBB;
      font-weight: bold;
      margin: 0 30rpx 20rpx 30rpx;
      border-radius: 20rpx;
    }
    .items{
      display: flex;
      align-items: center;
      height: 150rpx;
      position: relative;
      &::before{
        @include border(bottom, #F6F6F6)
      }
    }
    .nickname{
      flex: 1;
      font-size: 24rpx;
    }
    .avatar{
      width: 78rpx;
      height: 78rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 24rpx;
      border: 4rpx solid #FFF;
    }
    .num{
      font-size: 38rpx;
      font-weight: bold;
      width: 60rpx;
      text-align: center;
      &.small{
        font-size: 20rpx;
        color: #3D3D3D;
        font-weight: 400;
      }
      &.big{
        font-size: 60rpx;
      }
    }
  }
  .segmented-control{
    height: 88rpx;
    display: flex;
    text-align: center;
    margin-bottom: 30rpx;
    padding-left: 30rpx;
  }
  .control__item{
    padding: 5rpx;
    color: #A75000;
    font-size: 26rpx;
    margin-right: 40rpx;
    position: relative;
    font-weight: bold;
    .inner-b{
      background-color: #fff;
      border-radius: 200px;
      height: 72rpx;
      position: relative;
      border: 1px solid #D4D4D4;
      &.active{
        background-color: #FFD756;
        &::after{
          position: absolute;
          background: url(https://img.qumoyugo.com/img/NU6JIH9OPD8SOBK12YHL1697420584459.png) no-repeat;
          background-size: contain;
          content: '';
          width: 225rpx;
          top:-12rpx;
          height: 88rpx;
          left: -5px;

        }
      }
    }
    .inner-c{
      background-color: #fff;
      border-radius: 200px;
      height: 72rpx;
      position: relative;
      border: 1px solid #D4D4D4;
      &.active{
        background-color: #FFD756;
        &::after{
          position: absolute;
          background: url(https://img.qumoyugo.com/img/1N8GH5SER72G8LUA4RQ821697102796202.png) no-repeat;
          background-size: contain;
          content: '';
          width: 160rpx;
          top:-12rpx;
          height: 88rpx;
          left: -4px;
        }
      }
    }
    &:nth-child(1){
      width: 220rpx;
      color: #8C0000;
    }
    &:nth-child(2){
      width: 160rpx;
    }
    &.active{
      font-weight: bold;
    }
  }
  .money-b{
    height: 166rpx;
    background-color: #fff;
    border-radius: 18rpx;
    border: 1rpx solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    color: #666666;
    padding: 47rpx 30rpx;
    margin: 0 30rpx;
    .tix-btn{
      width: 122rpx;
      height: 48rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      border: 3rpx solid #FFBF45;
      font-size: 30rpx;
      color: #EE751E;
      line-height: 30rpx;
      padding: 9rpx 0;
    }
    .txt{
      line-height: 40rpx;
      font-size: 28rpx;
      color: #333333;
      margin-top: 6rpx;
    }
    .img{
      width: 72rpx;
      height: 72rpx;
      margin-right: 22rpx;
      align-self: start;
    }
    .xbg{
      font-size: 46rpx;
      color: #333333;
      line-height: 72rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      .my{
        font-weight: bold;
        line-height: 60rpx;
        height: 60rpx;
        display: inline-block;
        margin-right: 10rpx;
        font-family: Arial,Helvetica,sans-serif;
      }
    }
  }
  .cell-title{
    margin: 24rpx 30rpx;
    display: flex;
    justify-content: space-between;
    color: #333;
    font-size: 26rpx;
    .img{
      width: 24rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }
  }
  .list-account{
    // background: #FFFFFF;
    color: #333333;
    // border-radius: 20rpx;
    // border: 1rpx solid #dedede;
    border-bottom: none;
    padding: 28rpx;
    // margin: 0 20rpx;
    .select{
      margin-bottom: 18rpx;
    }
    .box{
      width: 120rpx;
      height: 44rpx;
      border-radius: 22rpx;
      border: 1rpx solid #979797;
      &:active{
        background-color: rgba(51,51,51,0.1);
      }
    }
    .account-s-lst{
      margin-top: 26rpx;
      .item{
        position: relative;
        padding: 24rpx 24rpx 24rpx 0;
        &::before{
          @include border(top, #E0E0E0)
        }
      }
      .no-data{
        text-align: center;
        color: #999999;
        margin: 100rpx 0;
        .img{
          width: 386rpx;
          height: 326rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
  .popup-title{
    height: 80rpx;
    background-color: #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 60rpx;
  }
  .picker-view{
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
    .item {
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-top: 8px;
    }
  }
  .term-rg{
    height: 100vh;
    background: #FFFFFF;
    width: 420rpx;
    padding-top: 114rpx;
    padding: 114rpx 0 96rpx 0;
    position: relative;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      padding: 0 30rpx;
    }
    .content{
      .tps{
        padding: 30rpx 30rpx 12rpx 30rpx;
        color: #999999;
      }
      .item{
        display: flex;
        height: 100rpx;
        align-items: center;
        font-size: 28rpx;
        padding: 0 30rpx;
        &.current{
          background-color: #F1F1F1;
        }
      }
      .img{
        width: 38rpx;
        height: 38rpx;
        margin-right: 22rpx;
      }
    }
    .bottom{
      position: absolute;
      bottom: 96rpx;
      left: 30rpx;
      right: 30rpx;
      padding-top: 56rpx;
      display: flex;
      justify-content: space-between;
      &::before{
        @include border(top, #E0E0E0)
      }
      .btn{
        width: 170rpx;
        height: 64rpx;
        border: 1rpx solid #94959A;
        font-size: 26rpx;
      }
    }
  }
  :deep(.uni-popup .uni-popup__wrapper.right){
    padding-top: 0;
  }
}
.chart-list{
  text-align: center;
  line-height: 108rpx;
  width: 100vw;
  position: absolute;
  top: 390rpx;
  left: 40rpx;
  background-color: #fff;
  width: 670rpx;
  background-color: #fff;
  border-radius: 20rpx;
  height: 324rpx;
  padding: 0 28rpx;
  .itm{
    position: relative;
    &::before{
      @include border(bottom, #F6F6F6)
    }
  }
}
</style>
